<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>电影院管理</el-breadcrumb-item>
         <el-breadcrumb-item>电影院列表</el-breadcrumb-item>
         <el-breadcrumb-item>修改影院信息</el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider></el-divider>
        <el-row>
 <el-col :span="12">      
 <el-form ref="form" :model="form" :rules="rules" label-width="120px">
  <el-form-item label="电影院名称" prop="cinema_name">
    <el-input v-model="form.cinema_name"></el-input>
  </el-form-item>
   <el-form-item label="选择位置">
   <div  id="mapContainer" style="width:100%;height:200px;border:1px solid #aaa"></div>
  </el-form-item>
  <el-form-item label="详细地址" prop="address">
    <el-input v-model="form.address"></el-input>
  </el-form-item>
    <el-form-item label="省份" prop="province">
    <el-input v-model="form.province"></el-input>
  </el-form-item>
    <el-form-item label="城市" prop="city">
    <el-input v-model="form.city"></el-input>
  </el-form-item>
    <el-form-item label="地区" prop="district">
    <el-input v-model="form.district"></el-input>
  </el-form-item>
    <el-form-item label="经度" prop="longitude">
    <el-input v-model="form.longitude"></el-input>
  </el-form-item>
    <el-form-item label="维度" prop="latitude">
    <el-input v-model="form.latitude"></el-input>
  </el-form-item>
    <el-form-item label="选择标签" prop="tags">
    <el-select v-model="form.tags" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.tagname"
      :value="item.tagname"
      >
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onUpdate">立即更新</el-button>
    <el-button @click="reset('form')">取消</el-button>
  </el-form-item>
</el-form>
     </el-col>
</el-row>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
 window._AMapSecurityConfig = {
            securityJsCode:'650b975fd5b0578deadff44022aa4e9e',
        }
    export default {
         data() {
      return {
        options:'',//存储返回的标签
        form: {
          cinema_name:'',  //用于绑定电影院名称
          address:'', //用于绑定电影院详细地址
          province: '',  //电影院省份
          city:'', //电影院城市
          id:this.$route.params.id,
          district: '',//电影院地区
          longitude: '',//经度
          latitude:'', //纬度
          tags:'',//标签
        },
        rules:{ //用于表单中数据的表单验证
              // 定义表单中每一个表单组件的验证规则
        cinema_name: [{ required: true, message: "请填写电影院名称", trigger: "blur" }],
        address: [{ required: true, message: "请填写电影院详细地址", trigger: "blur" }],
        province: [{ required: true, message: "请填写电影院省份", trigger: "blur" }],
        city: [{ required: true, message: "请填写电影院所属城市", trigger: "blur" }],
        district: [{ required: true, message: "请填写电影院地区", trigger: "blur" }],
        longitude: [{ required: true, message: "请填写电影院经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请填写电影院纬度", trigger: "blur" }],
        tags: [{ required: true, message: "请给影院添加标签", trigger: "blur" },],
      },
      }},
    methods: {
        /**
         * 获取影城标签
         */
        Tags(){
            this.$http.cinemaApi.tags().then(res => {
                console.log(res)
                this.options = res.data.data
            })
        },
        /**
         * 点击按钮添加该电影院
         */
      onUpdate() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            console.log(this.form)
            this.form.tags = this.form.tags.join('/')
            this.$http.cinemaApi.update(this.form).then(res => {
                console.log(res)
                if(res.data.code == 200){
                  this.$message({
                  type: 'success',
                  message: '修改成功'
                  });
                  this.$router.push('/home/cinema-list')
                }
            })
          } else {
            this.$message({
            type: 'warning',
            message: '请完善表单字段'
          });
          }
        });
        
      },
      //重置表单
      reset(form){
          this.$refs[form].resetFields();
      },
      /**
         * 初始化地图
         */
        initMap(){
         AMapLoader.load({
           "key": "c1eb7a1a92b7737a93997ac96f70714f",    // 申请好的Web端开发者Key，首次调用 load 时必填
           "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
           "plugins": ['AMap.Geocoder'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         }).then((AMap)=>{
         let map = new AMap.Map('mapContainer', {
           zoom:11,//级别
           center: [106.499226,29.583324],//中心点坐标
           viewMode:'3D'//使用3D视图
         });
         //为地图绑定点击事件
         let marker = null
         map.on('click',(e) => {
            let lnglat = e.lnglat
            console.log(e.lnglat)
        // 创建一个 Marker 实例：
        if(marker != null){
            map.remove(marker);
        }
         marker = new AMap.Marker({
         position: new AMap.LngLat(e.lnglat.lng,e.lnglat.lat),   // 经纬度对象，也可以是经纬度构成的一维数组
           });
         // 将创建的点标记添加到已有的地图实例：
          map.add(marker);
           let geocoder = new AMap.Geocoder()
            geocoder.getAddress([e.lnglat.KL,e.lnglat.kT],(status,result) => {
                console.log(status,result)
                this.form.address=result.regeocode.formattedAddress;
                this.form.province=result.regeocode.addressComponent.province
                if(result.regeocode.addressComponent.city == ''){
                  this.form.city=this.form.province=result.regeocode.addressComponent.province  
                }else{
                 this.form.city=result.regeocode.addressComponent.city   
                } 
                this.form.district=result.regeocode.addressComponent.district
                this.form.longitude=e.lnglat.lng
                this.form.latitude=e.lnglat.lat
            })
         })
        }).catch(e => {
         console.log(e);
     })   
     },
      //标点回填
     loadCurentCinema(){
      this.$http.cinemaApi.queryById({id:this.form.id}).then(res => {
        console.log(res)
        if(res.data.code == 200){
        this.form = res.data.data
        this.form.tags = res.data.data.tags.split('/')
        }
      })
     }
      },
      mounted () {
        //初始化地图
        this.initMap()
        //加载影院标签列表
        this.Tags()
        //表单回填
        this.loadCurentCinema()
      },
    }
</script>

<style>
      .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>